{% extends 'base.html' %}
{% load rbac %}
{% block menu_style %}
    <style>
        .active {
            color: red;
            background-color: #b9def0;
        }

        tr.active {
            border-left: orange 3px solid;
        }

    </style>
{% endblock menu_style %}
{% block content %}
    <div class="col-md-8 ">
        <div class="container">
            <div class="row">
                <div class="col-md-2">
                    <div class="panel panel-default">
                        <div class=" panel-heading">用户信息
                        </div>
                        <div class="panel-body">
                            <ul>
                                {% for user in user_list %}
                                    <li><a class="{% if user.id|safe == user_id %}active
                                    {% endif %} " href="?uid={{ user.id }}">{{ user.name }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <form method="post">
                        {% csrf_token %}
                         <input type="hidden" name="type" value="role">
                        <div class="panel panel-default">
                            <div class=" panel-heading">角色信息
                                {% if user_id %}
                                    <button
                                       class="btn btn-success glyphicon glyphicon-plus pull-right"
                                       style="margin-top: -8px;font-size: 8px">保存</button>
                                {% endif %}
                            </div>
                            <div class="panel-body">
                                <i style="font-size: small;color: darkgray">提示: 点击用户后才能为其分配角色</i>
                            </div>
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>选项</th>
                                </tr>
                                </thead>
                                <tbody id="role">
                                {% for role in role_list %}
                                    <tr class="{% if role.id|safe == role_id %}
                                    active
                                {% endif %} ">
                                        {% if user_id %}
                                            <td><a href="?uid={{ user_id }}&rid={{ role.id }}">{{ role.title }}</a></td>
                                        {% else %}
                                            <td><a href="?rid={{ role.id }}">{{ role.title }}</a></td>

                                        {% endif %}
                                        <td><input type="checkbox" name="roles" value="{{ role.id }}"
                                                {% if role.id in has_user_role_dict %}
                                                   checked="checked"
                                                {% endif %}
                                        ></td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
                <div class="col-md-5">
                    <form method="post">
                        {% csrf_token %}
                        <input type="hidden" name="type" value="permission">
                        <div class="panel panel-default">
                            <div class=" panel-heading"> 权限分配
                                {% if role_id %}
                                    <button
                                       class="btn btn-success glyphicon glyphicon-plus pull-right"
                                       style="margin-top: -8px;font-size: 8px">保存</button>
                                {% endif %}
                            </div>
                            <div class="panel-body">
                                <i style="font-size: small;color: darkgray">提示: 选择角色后才能为其分配权限</i>
                            </div>
                            <table class="table">
                                <tbody>
                                {% for menu in all_menu_list %}
                                    <tr class="info root">
                                        <td>{{ menu.title }}
                                            <div class="checkbox check-all " style="display: inline-block;margin-left: 300px">
                                                <label for="all-select-{{ menu.id }}">
                                                    <input type="checkbox" id="all-select-{{ menu.id }}"
                                                           value="all-select">
                                                    全选</label>
                                            </div>
                                        </td>
                                    </tr>
{#                                    {% if menu.children %}#}
                                        <tr class="node">
                                            <td>
                                                {% for second_menu in menu.children %}
                                                    <div class="parent checkbox" style="font-size: 14px;">
                                                        <label for="second-menu-{{ second_menu.id }}">{{ second_menu.title }}(菜单)</label>
                                                        <input class="check-select" style="margin-left: 10px" type="checkbox"
                                                               value="{{ second_menu.id }}"
                                                               id="second-menu-{{ second_menu.id }}"
                                                               name="permissions"
                                                                {% if second_menu.id in has_user_permissions_dict %}
                                                               checked="checked"
                                                                {% endif %}>
                                                    </div>
                                                    <div class="children checkbox"
                                                         style="font-size: 12px;margin-left: 20px">
                                                        {% for children in second_menu.children %}
                                                            <label for="children-{{ children.id }}">{{ children.title }}
                                                                <input class="check-select" style="margin-left: 1px;margin-top: 2px"
                                                                       type="checkbox" value="{{ children.id }}"
                                                                       id="children-{{ children.id }}"
                                                                       name="permissions"
                                                                        {% if children.id in has_user_permissions_dict %}
                                                                       checked="checked"
                                                                        {% endif %}>
                                                            </label>
                                                        {% endfor %}
                                                    </div>
                                                {% endfor %}
                                            </td>
                                        </tr>
{#                                    {% endif %}#}
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('.check-all input:checkbox').change(function () {
            $(this).parents('.root').next().find(':checkbox').prop('checked',$(this).prop('checked'))
        })
    </script>
{% endblock content %}]